<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 60px">
      <el-col :span="6">
        <el-card style="color: #409eff">
          <div><i class="el-icon-user-solid" />北京市交通事故驾驶人数</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ total }}
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #f56c6c">
          <div>
            <i class="el-icon-money" />事故数最大的时间窗口{{ maxage_users }} 时
          </div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ maxage }} 起事故
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67c23a">
          <div>
            <i class="el-icon-bank-card" />事故数最小的时间窗口:{{
              minage_users
            }}
            时
          </div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ minage }} 起事故
          </div>
        </el-card>
      </el-col>
      <!-- <el-col :span="6">
        <el-card style="color: #409eff">
          <div style="color: #409eff"><i class="el-icon-s-shop" />平均事故</div>
          <div style="padding: 10px 0; text-align: center; font-weight: bold">
            {{ avgage }}岁
          </div>
        </el-card>
      </el-col> -->
    </el-row>
    <el-row>
      <el-col :span="12">
        <div id="main" style="width: 800px; height: 480px"></div>
      </el-col>
      <el-col :span="12">
        <div id="pie" style="width: 600px; height: 450px"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { DriverTime } from "@/api/api";
import * as echarts from "echarts";
export default {
  name: "Home",
  data() {
    return {
      total: 0, // 初始值
      maxage: 0,
      minage: 100,
      avgage: 0,
    };
  },
  async mounted() {
    //使用mounted的目的是为了等页面元素渲染之后再触发

    var chartDom = document.getElementById("main");
    var myChart = echarts.init(chartDom);
    var charOption;
    charOption = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
        },
      },
      title: {
        text: "北京市交通事故驾驶人事故发生时间分布图: 0~23 时",
        // subtext: "比例图",
        left: "center",
      },
      dataset: [
        {
          dimensions: ["district", "score"],
          source: [
            ["Hannah Krause", 314],
            // ["Zhao Qian", 20, "Teacher", 351, "2011-03-01"],
            // ["Jasmin Krause ", 52, "Musician", 287, "2011-02-14"],
            // ["Li Lei", 37, "Teacher", 219, "2011-02-18"],
            // ["Karle Neumann", 25, "Engineer", 253, "2011-04-02"],
            // ["Adrian Groß", 19, "Teacher", "-", "2011-01-16"],
            // ["Mia Neumann", 71, "Engineer", 165, "2011-03-19"],
            // ["Böhm Fuchs", 36, "Musician", 318, "2011-02-24"],
            // ["Han Meimei", 67, "Engineer", 366, "2011-03-12"],
          ],
        },
        {
          transform: {
            type: "sort",
            config: { dimension: "district", order: "desc" },
          },
        },
      ],
      xAxis: {
        type: "category",
        axisLabel: { interval: 0, rotate: 30 },
      },
      yAxis: {},
      series: [
        {
          type: "bar",
          encode: { x: "name", y: "score" },
          datasetIndex: 1,
          label: {
            show: true, // 显示数据标签
            position: "top", // 标签位置
            formatter: "{c}", // 标签内容格式器，{c} 表示数据值
          },
          itemStyle: {
            color: "#9FE080", // 设置柱状图的背景颜色
            // color: "rgba(75, 137, 220, 0.8)", // 蓝颜色
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              // borderColor: "yourBorderColor", // 边框颜色，模拟背景色
              borderWidth: 2, // 边框宽度
              shadowColor: "rgba(0, 0, 0, 0.5)", // 设置阴影效果
            },
          },
        },
      ],
    };

    var pieChart = echarts.init(document.getElementById("pie"));
    var pieOption = {
      title: {
        text: "北京市交通事故驾驶人事故发生时间分析 TOP 9",
        // subtext: "比例图",
        left: "center",
      },
      tooltip: {
        trigger: "item",
      },
      legend: {
        orient: "vertical",
        left: "right",
      },
      series: [
        {
          type: "pie",
          radius: "70%",
          label: {
            normal: {
              show: true,
              position: "inner",
              textStyle: {
                fontWeight: 300,
                fontSize: 16,
                color: "#fff",
              },
              formatter: "{d}%", //自定义显示格式(b:name, c:value, d:百分比)
            },
          },
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    const res = await DriverTime();
    // console.log("-----", res);
    const newData = [];
    for (let i = 0; i <= res.data.length - 1; i++) {
      // console.log(res.data[i].district + "---" + res.data[i].users);
      newData[i] = [res.data[i].district + "时", res.data[i].users];
      this.total = this.total + res.data[i].users;
      if (res.data[i].users >= this.maxage) {
        this.maxage_users = res.data[i].district;
        this.maxage = res.data[i].users;
      }
      if (res.data[i].users <= this.minage) {
        this.minage_users = res.data[i].district;
        this.minage = res.data[i].users;
      }
      this.avgage = this.avgage + res.data[i].users;
    }
    this.avgage = Math.floor(this.avgage / 24);

    // 将所有最小的和最多的搜出来
    this.minage_users = "";
    this.maxage_users = "";
    for (let i = 0; i <= res.data.length - 1; i++) {
      if (res.data[i].users === this.minage) {
        this.minage_users = this.minage_users + res.data[i].district + ",";
      }
      if (res.data[i].users === this.maxage) {
        this.maxage_users = this.maxage_users + res.data[i].district + ",";
      }
    }
    charOption.series[0].data = newData; // 重新对要显示的数据进行赋值
    myChart.setOption(charOption);

    pieOption.series[0].data = [
      { name: res.data[0].district + "时", value: res.data[0].users },
      { name: res.data[1].district + "时", value: res.data[1].users },
      { name: res.data[2].district + "时", value: res.data[2].users },
      { name: res.data[3].district + "时", value: res.data[3].users },
      { name: res.data[4].district + "时", value: res.data[4].users },
      { name: res.data[5].district + "时", value: res.data[5].users },
      { name: res.data[6].district + "时", value: res.data[6].users },
      { name: res.data[7].district + "时", value: res.data[7].users },
      { name: res.data[8].district + "时", value: res.data[8].users },
      { name: res.data[9].district + "时", value: res.data[9].users },
    ];
    pieChart.setOption(pieOption);
  },
};
</script>
<style scoped>
/* 在 Vue.js 中，<style scoped> 是一个特殊的语法，用于限制样式的作用范围，确保样式仅对当前组件生效，而不会影响到其他组件或全局样式。 */
/* 当你在 Vue 组件中使用 <style scoped> 时，Vue 会自动为该组件的 HTML 元素添加一个唯一的属性（如 data-v-f3f3eg9），并在 CSS 选择器中添加这个属性，以确保样式只应用到该组件的根元素及其子元素上。 */
</style>
